<template>
    <div class="resource-info">
        <div class="resource-info-header" :draggable="true">
            <div class="drag-btn"></div>
            <div v-if="type === 'lbs'" class="slider-wrap">
                <div class="slider-header">
                    <div class="flex-ac">
                        <span>投放条件</span>
                        <div v-if="storeSelectByLbs.addresses && storeSelectByLbs.addresses.length" class="fw-bold ml-10">
                            <span v-if="latestSelectedAddress.title.length > 10">{{ latestSelectedAddress.title.substring(0,
                                10) + '...' }}</span>
                            <span v-else>{{ latestSelectedAddress.title }}</span>
                            <span>{{ ` 等${storeSelectByLbs.addresses.length}个位置附近${distanceActive}km` }}</span>
                        </div>
                    </div>
                    <div class="img-box">
                        <img class="slider-header-icon" src="@/assets/img/edit-icon-red.png"
                            @click="emits('switchAddressPopup')" />
                    </div>
                </div>
                <div class="slider-body">
                    <div class="slider-box">
                        <span>1km</span>
                        <Slider class="slider-main" v-model="distanceActive" :min="distanceMin" :max="distanceMax"
                            bar-height="4px" active-color="#e60044" inactive-color="#f5f5f5">
                            <template #button>
                                <img class="slider-button" src="@/assets/img/slider-btn-icon.png" />
                            </template>
                        </Slider>
                        <span>10km</span>
                    </div>
                    <div class="stepper-box">
                        <Stepper v-model="distanceActive" :min="distanceMin" :max="distanceMax" :show-minus="false"
                            :show-plus="false" integer @change="onDistanceStepperChange"></Stepper>
                        <span>km</span>
                    </div>
                </div>
            </div>
            <div class="count-box" :draggable="true">
                <div class="count-item">
                    <span class="count-title">楼盘</span>
                    <span class="count-number">{{ $numberWithCommas(detail.premisesNum) }}</span>
                </div>
                <div class="count-item">
                    <span class="count-title">点位</span>
                    <span class="count-number">{{ $numberWithCommas(detail.pointNum) }}</span>
                </div>
                <div class="count-item">
                    <span class="count-title">覆盖人数</span>
                    <span class="count-number">{{ $numberWithCommas(detail.coveredPeopleNum) }}</span>
                </div>
                <div class="count-item">
                    <span class="count-title">覆盖家庭</span>
                    <span class="count-number">{{ $numberWithCommas(detail.coveredHouseholdNum) }}</span>
                </div>
            </div>
        </div>
        <div class="resource-info-body" :class="isTouchend ? 'transition-slow' : 'transition-fast'"
            :style="`height: ${resourceInfoBodyHeight}px;`">
            <table>
                <thead>
                    <tr>
                        <td class="title width-100" rowspan="2">资源总览</td>
                        <td class="title center" colspan="2">电梯媒体</td>
                    </tr>
                    <tr>
                        <td class="width-120">智能屏</td>
                        <td class="width-120">LCD</td>
                        <!-- <td>海报</td> -->
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>楼盘</td>
                        <td class="number">{{ $numberWithCommas(detail.screen.premisesNum) }}</td>
                        <td class="number">{{ $numberWithCommas(detail.lcd.premisesNum) }}</td>
                        <!-- <td class="number">{{ $numberWithCommas(detail.frame.premisesNum) }}</td> -->
                    </tr>
                    <tr>
                        <td>点位</td>
                        <td class="number">{{ $numberWithCommas(detail.screen.pointNum) }}</td>
                        <td class="number">{{ $numberWithCommas(detail.lcd.pointNum) }}</td>
                        <!-- <td class="number">{{ $numberWithCommas(detail.frame.pointNum) }}</td> -->
                    </tr>
                    <tr>
                        <td>覆盖人数</td>
                        <td class="number">{{ $numberWithCommas(detail.screen.coveredPeopleNum) }}</td>
                        <td class="number">{{ $numberWithCommas(detail.lcd.coveredPeopleNum) }}</td>
                        <!-- <td class="number">{{ $numberWithCommas(detail.frame.coveredPeopleNum) }}</td> -->
                    </tr>
                    <tr>
                        <td>覆盖家庭</td>
                        <td class="number">{{ $numberWithCommas(detail.screen.coveredHouseholdNum) }}</td>
                        <td class="number">{{ $numberWithCommas(detail.lcd.coveredHouseholdNum) }}</td>
                        <!-- <td class="number">{{ $numberWithCommas(detail.frame.coveredHouseholdNum) }}</td> -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, reactive, ref, computed, watch, onBeforeMount, onMounted } from 'vue';
import { Slider, Stepper } from 'vant';
import { store } from '@/store';

export interface MediaResourceItem {
    premisesNum: number | string;
    pointNum: number | string;
    coveredHouseholdNum: number | string;
    coveredPeopleNum: number | string;
}
export interface MediaResourceInfo {
    premisesNum: number;
    pointNum: number;
    coveredHouseholdNum: number;
    coveredPeopleNum: number;
    screen: MediaResourceItem,
    lcd: MediaResourceItem,
    frame: MediaResourceItem,
}

const props = defineProps({
    type: {
        type: String,
        default: 'lbs',
    },
    detail: {
        type: Object,
        default: () => {
            return {
                premisesNum: 0,
                pointNum: 0,
                coveredHouseholdNum: 0,
                coveredPeopleNum: 0,
                screen: {
                    premisesNum: 0,
                    pointNum: 0,
                    coveredHouseholdNum: 0,
                    coveredPeopleNum: 0,
                },
                lcd: {
                    premisesNum: 0,
                    pointNum: 0,
                    coveredHouseholdNum: 0,
                    coveredPeopleNum: 0,
                },
                frame: {
                    premisesNum: 0,
                    pointNum: 0,
                    coveredHouseholdNum: 0,
                    coveredPeopleNum: 0,
                },
            } as MediaResourceInfo;
        },
    },
    distanceSelected: {
        type: Number,
        default: 3,
    },
});
const emits = defineEmits(['update:distanceSelected', 'switchLbsPopup', 'deleteFilter', 'switchCrowdTagsPopup']);
const storeApp = computed(() => {
    return store.state.app;
});
const storeSelectByLbs = computed(() => {
    return storeApp.value.selectByLbs;
});
const storeSelectAddresses = computed(() => {
    return storeSelectByLbs.value.addresses;
});
const latestSelectedAddress = computed(() => {
    let latestSelectedAddress = {};
    if (storeSelectAddresses.value.length) {
        latestSelectedAddress = storeSelectAddresses.value[storeSelectAddresses.value.length - 1];
    }
    return latestSelectedAddress;
});

const distanceMin = ref<number>(1);
const distanceMax = ref<number>(10);
const distanceActive = ref<number>(props.distanceSelected);
watch(() => props.distanceSelected, () => {
    distanceActive.value = props.distanceSelected;
});
watch(() => distanceActive.value, () => {
    emits('update:distanceSelected', distanceActive.value);
});

const onDistanceStepperChange = () => {
    if (distanceActive.value < distanceMin.value) {
        distanceActive.value = distanceMin.value;
    }
    if (distanceActive.value > distanceMax.value) {
        distanceActive.value = distanceMax.value;
    }
};

const resourceInfoBodyMinHeight = 40;
const resourceInfoBodyMaxHeight = 240;
let resourceInfoBodyHeight = ref<number>(40);
const isTouchend = ref<boolean>(false);
let touchmoveOldPageY = 0;
let touchPageYOffset = 0;
const addMediaResourceInfoEvent = () => {
    const resourceInfo = document.querySelector('.resource-info');
    resourceInfo.addEventListener('touchstart', (e) => {
        isTouchend.value = false;
        const touch = e.touches[0];
        touchmoveOldPageY = touch.pageY;
    });
    resourceInfo.addEventListener('touchmove', (e) => {
        e.preventDefault();
        const touch = e.touches[0];
        touchPageYOffset = touchmoveOldPageY - touch.pageY;
        touchmoveOldPageY = touch.pageY;
        const resourceInfoBodyHeightNew = resourceInfoBodyHeight.value + touchPageYOffset;
        if (touchPageYOffset > 0 && resourceInfoBodyHeightNew > resourceInfoBodyMaxHeight) {
            resourceInfoBodyHeight.value = resourceInfoBodyMaxHeight;
            return;
        }
        // 收起时
        if (touchPageYOffset < 0 && resourceInfoBodyHeightNew < resourceInfoBodyMinHeight) {
            resourceInfoBodyHeight.value = resourceInfoBodyMinHeight;
            return;
        }
        resourceInfoBodyHeight.value = resourceInfoBodyHeightNew;
    });
    resourceInfo.addEventListener('touchend', (e) => {
        isTouchend.value = true;
        // 展开
        if (touchPageYOffset > 0) {
            resourceInfoBodyHeight.value = resourceInfoBodyMaxHeight;
            return;
        }
        // 收起
        resourceInfoBodyHeight.value = resourceInfoBodyMinHeight;
    });
};
const resetResourceInfoBodyHeight = () => {
    resourceInfoBodyHeight.value = resourceInfoBodyMinHeight;
}

onBeforeMount(() => {

});
onMounted(() => {
    addMediaResourceInfoEvent();
});

defineExpose({
    resetResourceInfoBodyHeight,
});
</script>

<style lang="scss" scoped>
@import "@/styles/variables";

.resource-info {
    width: 100%;
    background: #fff;
    border-radius: 12px 12px 0 0;

    .resource-info-header {
        position: relative;

        .drag-btn {
            width: 24px;
            height: 3px;
            background: #333;
            border-radius: 1.5px;
            opacity: 0.5;
            transform: translateX(-50%);
            position: absolute;
            top: -9px;
            left: 50%;
        }

        .slider-wrap {
            font-size: 12px;
            color: #333;
            box-sizing: border-box;
            padding: 16px 12px 0 16px;

            .slider-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .img-box {
                width: 28px;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .slider-header-icon {
                    width: 12px;
                    height: 12px;
                }
            }

            .slider-body {
                margin-top: 15px;
                display: flex;
                align-items: center;
            }

            .slider-box {
                display: flex;
                flex: 1;

                .slider-main {
                    width: 190px;
                    margin: 0 12px;
                    position: relative;
                    top: 5px;
                }

                .slider-button {
                    width: 30px;
                    height: 30px;
                }
            }

            .stepper-box {
                display: flex;
                align-items: center;

                ::v-deep(.van-stepper__input) {
                    width: 40px;
                    height: 24px;
                    font-size: 12px;
                    color: #333;
                    border: 1px solid #eee;
                    border-radius: 4px;
                    background: #fff;
                    margin: 0 8px 0 0;
                }
            }
        }

        .count-box {
            width: 100%;
            height: 72px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

            .count-item {
                // width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .count-title {
                font-size: 12px;
                color: #848484;
            }

            .count-number {
                font-size: 16px;
                font-family: $spec_font;
                color: #333;
                margin-top: 2px;
            }
        }
    }

    .resource-info-body {
        padding: 0 12px;
        overflow: hidden;
        box-sizing: border-box;

        table {
            box-sizing: border-box;
            width: 100%;
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-color: #eee;

            td {
                height: 35px;
                font-size: 12px;
                color: #333333;
                text-align: left;
                line-height: 35px;
                border-width: 1px;
                border-style: solid;
                border-color: #eee;
                padding: 0 12px;
            }

            thead {
                width: 100%;
                background: #f8f8f8;
            }

            tbody {
                width: 100%;
                background: #fff;
            }

            .title {
                font-weight: bold;
                vertical-align: middle;
            }

            .center {
                text-align: center;
            }

            .number {
                font-family: $spec_font;
            }
        }

        &.transition-fast {
            transition: height 1ms linear;
        }

        &.transition-slow {
            transition: height 0.2s ease;
        }
    }
}
</style>
